<template>
  <div class="handleBlock">
    <div v-show="!isHideleft" class="main-content">
      <div class="block_title"><img src="@/assets/vf_images/handle.png" />相关操作</div>
      <div class="content">
        <div class="border-box">
          <!--左上边框-->
          <div class="t_line_box">
            <i class="t_l_line"></i>
            <i class="l_t_line"></i>
          </div>
          <!--右上边框-->
          <div class="t_line_box">
            <i class="t_r_line"></i>
            <i class="r_t_line"></i>
          </div>
          <!--左下边框-->
          <div class="t_line_box">
            <i class="l_b_line"></i>
            <i class="b_l_line"></i>
          </div>
          <!--右下边框-->
          <div class="t_line_box">
            <i class="r_b_line"></i>
            <i class="b_r_line"></i>
          </div>
        </div>
        <!-- <div class="handle-btn" @click="flyToHome">主视角</div> -->
        <div class="video-list">
          <div class="video-list-title">{{"融合点位列表"}}</div>
          <div class="video-table">
            <ui-table ref="videoTable" :isPagination="false" :tableHihlightCurrentRow="false" :isCheckBox="true" :columns="tableColumns"
              :data="videoData" :isLoad="tableLoad" @handleSelectionChange="handleSelectionChange"
              @handleClick="handleClick" @rowClick="rowClick">
            </ui-table>
          </div>
        </div>
      </div>
    </div>
    <div class="button-showOrhide">
      <div v-show="!isHideleft" class="button-hide-panel" @click="hideFun">
        <i class="el-icon-caret-left"></i>
      </div>
      <div v-show="isHideleft" class="button-show-panel" @click="showFun">
        <i class="el-icon-caret-right"></i>
      </div>
    </div>
  </div>
</template>

<script>
  import uiTable from "../../video-fusion/components/uiTable.vue"
  export default {
    name: 'handleBlock',
    components: {
      uiTable
    },
    props: {
      videoData: {
        type: Array,
        default: () => []
      }
    },
    computed: {
      showVideoList:function(){
        if(this.videoData.length>0){
          return true
        }
        return false
      }
    },
    watch:{},
    data() {
      return {
        show: false,
        tableLoad: false,
        tableColumns: [{
          label: "融合点位名称",
          prop: "modelName",
          width: '20rem'
        }],
        isHideleft: false,
        defaultArray: [],/* 是否隐藏左侧操作框 */
      }
    },
    mounted: function() {},
    methods: {
      handleSelectionChange: function(e) {
        if(e){
          let temp = e.map(item => {
            return item.id
          })
          if(temp.length > this.defaultArray.length){
            if(this.defaultArray.length === 0){
              temp.map(item =>{
                this.$emit("show",item)
              })
            }else{
              temp.map(item => {
                if(this.defaultArray.indexOf(item) === -1){
                  this.$emit("show",item)
                }
              })
            }
             this.defaultArray = temp
          }
          if(temp.length < this.defaultArray.length){
            this.defaultArray.map(item => {
              if(temp.indexOf(item) === -1){
                this.$emit("hide",item)
              }
            })
            this.defaultArray = temp
          }
        }
      },
      rowClick:function(row){/* 行点击事件 */
        this.$emit("flyToVModelById",row.id)
      },
      handleClick: function(row) {
        // console.log("表格按钮", row)
      },
      hideFun: function() {
        this.isHideleft = true;
        // this.$refs.videoTable.toggleSelection()
      },
      showFun: function() {
        this.isHideleft = false;
      },
      flyToHome: function() {
        this.$emit("flyToHome")
      },
    }
  }
</script>

<style lang="scss">
  .handleBlock {
    width: 32rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    pointer-events: auto;

    .main-content {
      width: 30rem;
      // height: 65rem;
      box-shadow: -10px 0px 10px #1F3D75 inset,
        0px -10px 10px #1F3D75 inset,
        10px 0px 10px #1F3D75 inset,
        0px 10px 10px #1F3D75 inset;
      border: 1px solid #1F3D75;
      box-sizing: border-box;
      position: relative;
      margin-top: 3rem;
      margin-left: 2rem;
      display: flex;
      flex-direction: column;

      .block_title {
        background-color: #1F3D75;
        border-radius: 1.8rem;
        position: absolute;
        height: 3.5rem;
        width: 60%;
        top: -1.8rem;
        color: rgba(255, 255, 255, 0.8);
        font-weight: bold;
        font-size: 1.5rem;
        left: 20%;
        line-height: 3.5rem;
        text-align: center;

        >img {
          height: 1.8rem;
          width: 1.8rem;
          margin-right: 1.5rem;
          position: relative;
          top: 0.3rem
        }
      }

      .content {
        margin-top: 2rem;
        margin-bottom: 2.5rem;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;

        .floor-btn {
          margin-top: 2rem;

          .active {
            background-color: #2D5CAB;
          }
        }

        .handle-btn {
          height: 4rem;
          width: 15rem;
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          margin-top: 1rem;
          border-radius: 0.2rem;
          color: rgba(255, 255, 255, 0.8);
          box-shadow: -1px 0px 10px #1f3d75 inset, 0px -1px 10px #1f3d75 inset, -1px 0px 10px #1f3d75 inset, 0px 1px 1px #1f3d75 inset;
          box-sizing: border-box;

          &:hover {
            cursor: pointer;
            background-color: #2D5CAB;
          }
        }

        .video-list {
          margin-top: 1rem;
          height: 27rem;
          width: 26rem;
          background-color: rgba(14, 30, 52, 0.4);
          border: 1px dotted #29549E;
          border-radius: 0.3rem;

          .video-list-title {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            height: 2.5rem;
            width: 25rem;
            background-color: #1F3D75;
            border-radius: 0.4rem;
            margin-top: 0.7rem;
            margin-left: 0.4rem;
            font-size: 1.2rem;
            color: rgba(255, 255, 255, 0.7);
          }

          .video-table {
            height: 20rem;
            margin-left: auto;
            margin-top: 1rem;
            overflow-y: auto;
          }
        }

        .border-box {
          .l_t_line {
            width: 5px;
            height: 24px;
            left: -3px;
            top: -3px;
          }

          .t_l_line {
            height: 5px;
            width: 26px;
            left: -3px;
            top: -3px;
          }

          .t_line_box {
            // position: absolute;
            width: 100%;
            height: 100%;
          }

          .t_line_box i {
            background-color: #4788fb;
            box-shadow: 0px 0px 10px #4788fb;
            position: absolute;
          }

          .t_r_line {
            height: 5px;
            width: 26px;
            right: -3px;
            top: -3px;
          }

          .t_title {
            width: 100%;
            height: 100%;
            text-align: center;
            font-size: 2.5em;
            line-height: 40px;
            color: #fff;
          }

          .r_t_line {
            width: 5px;
            height: 24px;
            right: -3px;
            top: -3px;
          }

          .l_b_line {
            width: 5px;
            height: 24px;
            left: -3px;
            bottom: -3px;
          }

          .b_l_line {
            height: 5px;
            width: 26px;
            left: -3px;
            bottom: -3px;
          }

          .r_b_line {
            width: 5px;
            height: 24px;
            right: -3px;
            bottom: -3px;
          }

          .b_r_line {
            height: 5px;
            width: 26px;
            right: -3px;
            bottom: -3px;
          }
        }

      }
    }

    .button-showOrhide {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 2rem;
      position: relative;

      .button-hide-panel {
        height: 8rem;
        text-align: center;
        bottom: 0;
        color: rgba(255, 255, 255, 0.8);
        pointer-events: auto;
        border: 1px solid rgba(45, 92, 171, 0.75);
        background-color: rgba(11, 104, 112, 0.2);
        border-radius: 0.1rem;
        border-top-left-radius: 1.5rem;
        border-bottom-left-radius: 1.5rem;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 3rem;

        >i {
          font-size: 1.6rem;
          // line-height: 1rem;
          color: rgba(255, 255, 255, 0.8);
          transition: all 300ms ease-out;
        }

        &:hover {
          border-color: rgba(11, 104, 112, 0.9);
        }
      }

      .button-show-panel {
        height: 8rem;
        text-align: center;
        bottom: 0;
        color: rgba(255, 255, 255, 0.8);
        pointer-events: auto;
        border: 1px solid rgba(45, 92, 171, 0.75);
        background-color: rgba(11, 104, 112, 0.2);
        border-radius: 0.1rem;
        border-top-right-radius: 1.5rem;
        border-bottom-right-radius: 1.5rem;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 3rem;

        >i {
          font-size: 1.6rem;
          // line-height: 1rem;
          color: rgba(255, 255, 255, 0.8);
          transition: all 300ms ease-out;
        }

        &:hover {
          border-color: rgba(11, 104, 112, 0.9);
        }
      }
    }
  }
</style>
